<template>
  <div class="app-container">
<!--    查询组件-->
    <div style="height: auto">
      <div style="">
        <div style="float: left"><span style="line-height: 40px;" v-text="'总金额:'+Allmoney+'元'"></span></div>
        <div>
          <el-form :data="querydata">
            <el-button  style="display: inline-block;float: right;width: 100px" type="primary" @click="handleQuery" >查询</el-button>
            <el-date-picker v-model="querydata.billDate" style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="month" placeholder="开票年月">
            </el-date-picker>
            <el-input v-model="querydata.buyUnit" placeholder="采购单位"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
            <el-input v-model="querydata.billNum" placeholder="发票编号"  style="display: inline-block;float: right;width: 130px;margin-right: 5px" type="primary"  ></el-input>
          </el-form>
        </div>
      </div>
    </div>
<!--    表格组件-->
    <el-table
      ref="purTable"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <!-- 展开折叠部分 -->
      <el-table-column type="expand" width="1" style="display: none;border-right: 0px solid #ebeef5">
        <template slot-scope="scope">
          <el-table :data="list[scope.$index].saleBillgoodsList" style="width: 100%" max-height="250">
            <el-table-column label="品名" width="250">
              <template slot-scope="scopeBill">
                {{scopeBill.row.typeName}}
              </template>
            </el-table-column>
            <el-table-column label="商品名称" width="250">
              <template slot-scope="scopeBill">
                {{scopeBill.row.goodsName}}
              </template>
            </el-table-column>
            <el-table-column label="型号" width="250">
              <template slot-scope="scopeBill">
                {{scopeBill.row.modle}}
              </template>
            </el-table-column>
              <el-table-column label="采购数量" width="250">
                <template slot-scope="scopeBill">
                  {{scopeBill.row.goodsAccount}}
                </template>
              </el-table-column>
            <el-table-column label="单价" width="250">
              <template slot-scope="scopeBill">
                {{scopeBill.row.goodsUnitPrice}}
              </template>
            </el-table-column>
            <el-table-column label="金额" width="170">
              <template slot-scope="scopeBill">
                {{scopeBill.row.goodsSumPrice}}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>

      <el-table-column label="发票编号" width="280" align="center">
        <template slot-scope="scope">
          {{ scope.row.billNum }}
        </template>
      </el-table-column>
      <el-table-column label="采购单位" width="280" align="center">
        <template slot-scope="scope">
          {{ scope.row.buyUnit }}
        </template>
      </el-table-column>
      <el-table-column label="发票金额" width="280" align="center">
        <template slot-scope="scope">
          {{ scope.row.billAccount}}
        </template>
      </el-table-column>
      <el-table-column label="发票类型" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.billType }}
        </template>
      </el-table-column>
      <el-table-column label="开票日期" width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.billDate }}
        </template>
      </el-table-column>
      <el-table-column label="创建者" width="200" align="center">
        <template slot-scope="scope">
          {{ scope.row.createAdminTrueName }}
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="140" align="center">
        <template slot-scope="scope">
          {{ scope.row.createDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作"  align="center" width="110">
        <template slot-scope="scope">
          <el-button size="small" plain @click="toogleExpand(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pagination-container">

      <el-pagination
        background

        @current-change="handleCurrentChange"

        :current-page="pagination.currentPage"

        :page-size="pagination.pageSize"

        layout="total, prev, pager, next, jumper"

        :total="pagination.total">

      </el-pagination>
    </div>


  </div>
</template>

<script>
import api from '@/api/saleBill'
import { parseTime } from '@/utils'

export default {
  data() {
    return {
      querydata:{ },
      list: null,
      listLoading: true,
      pagination: {//分页相关模型数据
        currentPage: 1,//当前页码
        pageSize:10,//每页显示的记录数
        total:0,//总记录数
      },
      Allmoney: null,

    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    //切换页码
    handleCurrentChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getAll()
    },
    //所有
    getAll() {
      api.getList(this.pagination).then(response => {
        this.list = response.data.List
        this.pagination.currentPage = response.data.page.number + 1
        this.pagination.pageSize = response.data.page.size
        this.pagination.total = response.data.page.totalElements
        this.listLoading = false
        this.Allmoney=response.data.sum
      })
    },
    //查询
    handleQuery(){
      let formdata = new FormData()
      formdata.append("currentPage",this.pagination.currentPage)
      formdata.append("pageSize", this.pagination.pageSize)
      if(this.querydata.billDate!=null&&this.querydata.billDate!="")
        formdata.append("billDate",parseTime(this.querydata.billDate))
      if(this.querydata.buyUnit!=null&&this.querydata.buyUnit!="")
        formdata.append("buyUnit",this.querydata.buyUnit)
      if(this.querydata.billNum!=null&&this.querydata.billNum!="")
        formdata.append("billNum",this.querydata.billNum)
      api.Query(formdata).then(response=>{
        this.list = response.data.List
        this.pagination.currentPage = response.data.page.number + 1
        this.pagination.pageSize = response.data.page.size
        this.pagination.total = response.data.page.totalElements
        this.Allmoney=response.data.sum
      })
    },

    fetchData() {
      this.listLoading = true
      this.getAll()
    },

    //弹出折叠面板
    toogleExpand(row) {
      const purTable = this.$refs.purTable
      // 注意，这里的 this.list 是上面 data 中的 list
      // 通过比对数据与行里的数据，对展开行进行控制，获取对应值
      this.list.map((item) => {
        if (row.id !== item.id) {
          purTable.toggleRowExpansion(item, false)
        }
      })
      purTable.toggleRowExpansion(row)
    },

  },
  computed: {

  }
}
</script>
